<template>
  <div>
    <el-tabs type="border-card" @tab-click="tabClick">
      <el-tab-pane
        :label="type.Description"
        v-for="type in types"
        :key="type.EnumValue"
      >
        <div class="header">
          <span style="margin-left: 20px">关键字</span>
          <el-input
            placeholder="请输入关键字"
            v-model="req.keyword"
            style="width: 200px; margin-left: 10px"
            clearable
          ></el-input>
          <el-button
            type="text"
            style="margin-left: 20px"
            size="small"
            @click="getContributionProjects()"
          >
            搜索
          </el-button>
        </div>
        <el-table
          style="overflow: auto"
          :data="projects"
          stripe
          border
          highlight-current-row
          show-summary
        >
          <el-table-column type="index" width="70"></el-table-column>
          <el-table-column label="名称" prop="CP_Name"></el-table-column>
          <el-table-column label="权重" prop="CP_Weight"></el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              {{ scope.row.CP_Remark }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-check"
                type="text"
                @click="choose(scope.row)"
              >
                选中
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import {
  getContributionProjects,
  getCaseEmployeeTypes,
} from '@/api/core/contributionProject'
export default {
  data: function () {
    return {
      types: [],
      curType: null,
      req: {
        type: null,
        keyword: '',
      },
      projects: [],
    }
  },
  methods: {
    tabClick(val) {
      this.curType = this.types.find((x) => x.Description == val.label)
      this.getContributionProjects()
    },
    getCaseEmployeeTypes() {
      getCaseEmployeeTypes().then(({ data }) => {
        this.types = data
        this.curType = this.types[0]
        this.getContributionProjects()
      })
    },
    getContributionProjects() {
      this.req.type = this.curType.EnumValue
      getContributionProjects(this.req).then(({ data }) => {
        this.projects = data
      })
    },
    choose(project) {
      this.$emit('choose', project)
    },
  },
  mounted() {
    this.getCaseEmployeeTypes()
  },
}
</script>

<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
.main {
  height: calc(100% - 130px);
  padding: 10px;
}
.el-table::before {
  z-index: inherit;
}
</style>